<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>学生添加</title>
	<link rel="stylesheet" href="/scriptZIP/layui.min.css">
	<link rel="stylesheet" href="../css/layui.css">
	<link rel="stylesheet" href="../css/radio.css">
	<link rel="stylesheet" href="../css/item.css">
	<link rel="stylesheet" href="../css/popup.css">
	<link rel="stylesheet" href="/scriptZIP/vue-select.min.css">

	<style>
		#portrait {
			width: 100px;
			height: 100px;
		}

		.layui-row {
			margin-top: 50px;
		}

		.offer {
			width: 100px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			font-size: 16px;
			border-radius: 4px;
		}

		.return {
			width: 100px;
			height: 35px;
			text-align: center;
			line-height: 35px;
			margin-top: -35px;
			float: right;
			margin-right: calc(30% - 5px);
			font-size: 16px;
			border-radius: 4px;
		}

		.layui-row {
			margin-bottom: 30px;
		}

		.name,
		.classesName,
		.studentid,
		.bindingcode,
		.entertime,
		.graduation,
		.birthday,
		.address,
		.text {
			background-color: #73c7ec;
			color: white;
		}

		.img-wrap {
			display: inline-block;
			position: relative;
		}

		.remove {
			position: absolute;
			top: 3px;
			right: 3px;
		}

		.notice-btn {
			border: none;
			cursor: pointer;
			width: 200px;
			height: 40px;
			background-color: #409eff;
			color: white;
			letter-spacing: 5px;
			border-radius: 5px;
		}

		.notice-btn:hover {
			background-color: #66b1ff;
		}

		.look-btn:hover {
			background-color: #66b1ff;
		}

		.new-layui-form-item {
			display: flex;
			flex-wrap: wrap;
		}

		.new-layui-form-item .card {
			width: 275px;
			display: flex;
			align-items: center;
		}

		.new-layui-form-item .card p {
			margin: 0 2px;
			cursor: pointer;
		}

		[v-if] {
			display: none;
		}

		.layui-input-block select {
			display: inline-block;
			width: 50%;
			height: 30px;
			min-height: 30px;
			padding-left: 10px;
			border-color: #708090;
		}

		.parent-item {
			display: flex;
			align-items: center;
			margin-left: 45px;
			margin-top: 10px;
		}

		.relationship-select {
			width: 150px;
			margin-right: 10px;
		}

		.parent-name {
			width: 110px !important;
			margin-right: 10px;
		}

		.layui-btn {
			margin-left: 10px;
		}

		.layui-form-item .layui-inline {
			margin: 0;
			width: 120px;
		}

		.textoverflow {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.popup {
			width: 75%;
			height: 60vh;
			height: auto;
		}

		.popup-center {
			margin: 15px 0;
			padding: 0 20px;
		}
		.genjinjilu_box {
			padding-bottom: 10px;
		}
		.textarea1{
			font-size: 16px;
		}
		.shijian{
			display: flex;
			justify-content: right;
			color: #999;
		}
	</style>
</head>

<body>

	<div id="vue-root">
		<div class="layui-row">
			<div class="layui-col-md6 layui-col-md-offset3">
				<div class="layui-form-item">
					<label class="layui-form-label required">学员姓名</label>
					<div class="layui-input-block">
						<input name="studentName" v-validate="'required'" data-vv-as="学生姓名" autocomplete="off"
							placeholder="请输入学生姓名" class="layui-input name" v-model="item.name">
						<div class="checkout_state" v-text="err('studentName')"></div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">头像上传</label>
					<div class="img-wrap">
						<label for="File1" id="tu1">
							<img :src="img" id="portrait">
						</label>
						<img src="/image/remove.svg" v-if="item.avatar" class="remove" @click="delPic" alt=""
							title="删除图片">
					</div>

					<div class="checkout_state" v-text="err('flie')"></div>
					<form id="form" method="post" ref="form" enctype="multipart/form-data" style="display: none">
						<input type="file" id="File1" data-vv-as="头像" v-validate="'size:10240'" name="file"
							accept="image/*" @change="upload" ref="file">
					</form>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">性别</label>
					<div class="layui-input-block" style="padding-top: 13px;line-height: 15px;">
						<input type="radio" name="sex" :value="true" title="男" checked="checked" v-model="item.sex">
						<span>男</span>
						<input type="radio" name="sex" :value="false" title="女" style="margin-left: 20px;"
							v-model="item.sex">
						<span>女</span>
					</div>
				</div>


				<div class="layui-form-item">
					<label class="layui-form-label required">就读学校</label>
					<div class="layui-input-block">
						<input name="schoolName" v-validate="'required'" placeholder="请输入就读学校" class="layui-input schoolName" data-vv-as="就读学校" v-model="item.schoolName">
						<div class="checkout_state" v-text="err('schoolName')"></div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label required">就读年级</label>
					<div class="layui-input-block">
						<select name="gradeName" class="gradeName layui-input" v-validate="'required'" data-vv-as="年级名称"
							v-model="item.grade">
							<option :value="undefined" disabled>请选择就读年级</option>
							<option v-for="grade in grades" :key="grade.id" :value="grade.id" v-text="grade.name">
							</option>
						</select>
						<div class="checkout_state" v-text="err('gradeName')"></div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-form-item">
						<label class="layui-form-label required">家长姓名</label>
						<div class="layui-input-block">
							<div style="padding-left: 45px;">
								<div v-for="(jiazhang,i) in jiarenList" :key="i">
									<span>关系：</span><span>{{fileName(jiazhang.value)}}</span>&nbsp;&nbsp;<span>姓名：</span><span>{{jiazhang.text}}</span>
									
									&nbsp;&nbsp;<span v-show="jiazhang.value=='father'">{{jiazhang.fatherPhone}}</span>
									<span v-show="jiazhang.value=='mother'">{{jiazhang.motherPhone}}</span>
									<span v-show="jiazhang.value=='grandfather'">{{jiazhang.grandadPhone}}</span>
									<span v-show="jiazhang.value=='grandmother'">{{jiazhang.grandmaPhone}}</span>
									<span v-show="jiazhang.value=='other'">{{jiazhang.otherParentsPhone}}</span>
									<span style="margin-left: 6px;color: #999;"
										@click="removeParent(jiazhang.value)">删除</span>
								</div>
							</div>
							<div class="parent-item" v-if="jiarenList.length<5">
								<div class="layui-inline">
									<select class="layui-input relationship-select parent-name"
										v-model="parents.relationship">
										<option value="" disabled>选择关系</option>
										<option :value="item.value" v-for="(item,i) in kinsfolkList" :key="">
											{{item.text}}</option>
									</select>
								</div>
								<div class="layui-inline">
									<input placeholder="请输入姓名" class="layui-input bindingcode parent-name"
										v-model="parents.name">
										
								</div>
								<div class="layui-inline">
									<input placeholder="请输入手机号" class="layui-input bindingcode parent-name" v-model="parents.cellphone">
								</div>
								<button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
									@click="addParent()">新增</button>
							</div>

						</div>
					</div>

					<!-- 绑定码当成联系电话 -->
					<div class="layui-form-item">
						<label class="layui-form-label required">
							唯一手机号<br/>（绑定码）
						</label>
						<div class="layui-input-block">
							<input name="bindCode" v-validate="'required|phone'" data-vv-as="电话号码" autocomplete="off"
								placeholder="请输入电话号码" class="layui-input bindingcode" v-model="item.bindCode">
							<div class="checkout_state" v-text="err('bindCode')"></div>
						</div>
					</div>

					<div class="layui-form-item new-layui-form-item">
						<label class="layui-form-label">微信号</label>
						<div class="wx_box" style="display: flex;">
							<select class="layui-input relationship-select" v-model="parent.signalstatus">
								<option value="undefined" disabled>选择状态</option>
								<option value="1">已添加</option>
								<option value="2">未添加</option>
								<option value="3">已删除</option>
								<option value="4">已拉黑</option>
							</select>
							<input placeholder="请输入微信号" class="layui-input bindingcode" v-model="item.wechatId">
						</div>
					</div>


					<div class="layui-form-item">
						<label class="layui-form-label">学员分配校区</label>
						<div class="layui-input-block">
							<v-select placeholder="请选择分配校区" label="name" :options="schools" :reduce="item=>item.id"
								v-model="item.schoolId"></v-select>
							<!-- <select 
								v-model="item.schoolId">
								<option :value="undefined" disabled>请选择校区</option>
								<option v-for="school in schools" :key="school.id" :value="school.id"
									v-text="school.name"></option>
							</select> -->
							<div class="checkout_state" v-text="err('schoolName')"></div>
						</div>
					</div>

					
					<div class="layui-form-item">
						<div class="layui-input-block">
							<div class="offer" @click="submit2">立即提交</div>
							<div class="return" onclick="history.back()">取消</div>
						</div>
					</div>
				</div>
			</div>

			<!-- <div v-if="show" class="model-table5" @click="show=false">
				<div class="popup" @click.stop>
					<div class="popup-title">跟进记录</div>
					<div class="popup-center">
						<div class="genjinjilu_box" v-for="(jilu,i) in textareaList">
							<div class="textarea1">({{i+1}})、{{jilu.content }}</div>
							<div class="shijian">
								<span>时间：{{jilu.times}}</span>
								<span style="margin-left: 10px;">跟进人：{{jilu.username}}</span> 
							</div>
						</div>
					</div>
					<div style="margin: 20px 0;display: flex;justify-content: center;">
						<button class="notice-btn" @click="show=false">关闭</button>
					</div>
				</div>
			</div> -->
		</div>
		<script src="/scriptZIP/qs.min.js"></script>
		<script src="/scriptZIP/vue.min.js"></script>
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
		<script src="/scriptZIP/vue-select.min.js"></script>

		<script src="/lib/laydate/laydate.js"></script>

		<script src="/js/common.js"></script>
		<script src="/js/item.js"></script>

		<script>
			Vue.component('v-select', VueSelect.VueSelect);
			var app = new Vue(merge({
				data: {
					parents: { name: '', relationship: '',cellphone:''},
					
					item: {
						avatar: null,
						sex: true,
						agentId: top_params().id,
						cards: {},
						status: '1',
						
					},
					url: '/pc/student',
					jiarenList: [],
					kinsfolkList: [],
					map2: [
						{ text: '父亲', value: 'father' },
						{ text: '母亲', value: 'mother' },
						{ text: '爷爷', value: 'grandfather' },
						{ text: '奶奶', value: 'grandmother' },
						{ text: '其他家人', value: 'other' },
					],
					grades: [],
					courses:[],
					dataSource: null,
					dataStatus: null,
					dataIntent: null,
					followReason: null,
					fschools: [],
					schools: [],
					promoters: [],
					peoples: [],
					textareaList: [],
					textareaValue: '',
					show:false,
				},
				created: function () {
					var id = params().id;
					this.kinsfolkList = this.map2
					if (id) {
						axios.get(this.url + '/' + id).then(function (res) {
							var data = res.data;
							this.formatData(data);
							this.item = data;
							console.log('itemitem',this.item) //处理：前端根据传某id进行新增、编辑判断数据处理
							this.copy = copy(data);
							if(data.followUpRecord)  this.textareaList=data.followUpRecord;
							
							var obj = this.item;
							var arr = [];
							
							if (obj.fatherName) arr.push({ value: 'father', text: obj.fatherName, fatherPhone:obj.fatherPhone });
							if (obj.motherName) arr.push({ value: 'mother', text: obj.motherName, motherPhone:obj.motherPhone });
							if (obj.grandadName) arr.push({ value: 'grandfather', text: obj.grandadName, grandadPhone:obj.grandadPhone});
							if (obj.grandmaName) arr.push({ value: 'grandmother', text: obj.grandmaName, grandmaPhone:obj.grandmaPhone });
							if (obj.otherParents) arr.push({ value: 'other', text: obj.otherParents,  otherParentsPhone:obj.otherParentsPhone});
							
							this.jiarenList = arr
							
							this.fileList()
						}.bind(this));
					}
					
					// 统一年级
					axios.get('/pc/grade/all').then(function (res) {
						this.grades = res.data;
					}.bind(this));
					


					// 查询代理商学校
					axios.get('/pc/school/all/' + this.item.agentId).then(function (res) {
						this.fschools = res.data;
						this.schools = res.data;
					}.bind(this));

					
				},

				methods: {
					

					addParent() {
						// 验证
						// 正则表达式：以1开头，第二位是3-9，后面跟9位数字
						const regex = /^1\d{10}$/;
						
						if (regex.test(this.parents.cellphone)) {
							console.log("手机号有效");
							
						} else {
							// console.log("手机号无效");
							alert('手机号无效')
							
						}
						if (!this.parents.name || !this.parents.relationship) return alert('请填写完整')
						if (this.parents.relationship == 'father') {
							this.jiarenList.push({ value: 'father', text: this.parents.name, fatherPhone:this.parents.cellphone})
							this.item.fatherName = this.parents.name
							this.item.fatherPhone=this.parents.cellphone

						} else if (this.parents.relationship == 'mother') {
							this.jiarenList.push({ value: 'mother', text: this.parents.name, motherPhone:this.parents.cellphone})
							this.item.motherName = this.parents.name
							this.item.motherPhone=this.parents.cellphone

						} else if (this.parents.relationship == 'grandfather') {
							this.jiarenList.push({ value: 'grandfather', text: this.parents.name, grandadPhone:this.parents.cellphone })
							this.item.grandadName = this.parents.name
							this.item.grandadPhone=this.parents.cellphone

						} else if (this.parents.relationship == 'grandmother') {
							this.jiarenList.push({ value: 'grandmother', text: this.parents.name, grandmaPhone:this.parents.cellphone  })
							this.item.grandmaName = this.parents.name
							this.item.grandmaName = this.parents.cellphone

						} else if (this.parents.relationship == 'other') {
							this.jiarenList.push({ value: 'other', text: this.parents.name, otherParentsPhone:this.parents.cellphone })
							this.item.otherParents = this.parents.name
							this.item.otherParents = this.parents.cellphone
							
						}
						console.log(this.jiarenList,'1111111111')
						this.fileList()
						this.parents.name = ''
						this.parents.relationship = ''
						this.parents.cellphone=''
					},
					fileList() {
						var arr = [];
						this.map2.forEach(obj1 => {
							let found = this.jiarenList.some(obj2 => {
								return obj1.value === obj2.value;
							});

							if (!found) {
								arr.push(obj1);
							}
						});
						this.kinsfolkList = arr
					},
					filterList(text) {
						let filteredArr = this.jiarenList.filter(obj => obj.value !== text);
						this.jiarenList = filteredArr
						this.fileList()
					},
					fileName(type) {
						var name = ''
						for (let i = 0; i < this.map2.length; i++) {
							if (type == this.map2[i].value) {
								name = this.map2[i].text
							}

						}
						return name;
					},
					
					removeParent(name) {
						if (name == 'father') {
							delete this.item.fatherName
						} else if (name == 'mother') {
							delete this.item.motherName
						} else if (name == 'grandfather') {
							delete this.item.grandadName
						} else if (name == 'grandmother') {
							delete this.item.grandmaName
						} else if (name == 'other') {
							delete this.item.otherParents
						}
						this.filterList(name)
						this.item = this.item
					},
					updateParentField(index) {
						const selectedRelationship = this.parents[index].relationship;
						const parentName = this.parents[index].name;

						// 清空相应的字段
						if (selectedRelationship === 'father') {
							this.fatherName = parentName;
							this.motherName = ''; // 可根据需要清空其他字段
						} else if (selectedRelationship === 'mother') {
							this.motherName = parentName;
							this.fatherName = ''; // 可根据需要清空其他字段
						}
					},
					cardDel: function (status) {
						Vue.delete(this.item.cards, status);
					},

					formatData: function (data) {
						if (data.birthday) data.birthday = dayjs(data.birthday).format('YYYY-MM-DD');
						if (data.graduationDate) data.graduationDate = dayjs(data.graduationDate).format('YYYY-MM-DD');
						if (data.admissionDate) data.admissionDate = dayjs(data.admissionDate).format('YYYY-MM-DD');
					},
					upload: function () {
						var file = this.$refs.file.files[0];
						if (!file) return;
						if (file.size > 5.12E5) {
							alert('文件不宜大于500kB');
							return;
						}
						axios.post('/pc/upload/student?schoolId=' + this.item.agentId,
							new FormData(this.$refs.form)).then(function (res) {
								this.item.avatar = res.data.data;
							}.bind(this));
					},
					delPic: function () {
						this.item.avatar = '';
					},
					addtext: function () {
						if (!this.textareaValue) return alert('请填写内容')
						var name= localStorage.getItem('staffUserName')
						var obj = { username: '', content: '', times: '' }
						obj.content = this.textareaValue
						obj.username = name!='null'?name:sessionStorage.getItem('hxt-u')
						obj.times = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
						this.textareaList.unshift(obj);
						this.textareaValue = ''
					},
					viewtext: function () {
						this.show=true
					},
					submit2: function () {
						var success = function () {
							alert(locale == 'en' ? 'succeed' : '成功');
							history.back();
						};
						if (this.jiarenList.length < 1) return alert(locale == 'en' ? 'Fill in the parent name' : '请填写家长姓名')
						if (this.textareaList.length) {
							this.item.followUpRecord=this.textareaList
						}
						this.$validator.validate().then(function (result) {
							if (result) {
								this.fillData();
								if (this.item.id) {
									var o = compare(this.item, this.copy);
									axios.put(this.url, o).then(success);
								} else {
									axios.post(this.url, this.item).then(success);
								}
							} else {
								alert(locale == 'en' ? 'Please enter the complete information' : '请输入完整信息！');
							}
						}.bind(this));
					},
				},
				computed: {
					img: function () {
						if (!this.item.avatar) return '/image/upload.png';
						return '/static/' + '/student/' + this.item.avatar;
					},
				},
				watch: {
					'item.name': function (newV) {
						this.item.name = newV.trim()
					},
					'item.bindCode': function (newV) {
						this.item.bindCode = newV.trim()
					}
				}
			}));

			['birthday', 'admissionDate', 'graduationDate'].forEach(function (it) {
				laydate.render({
					elem: '#' + it,
					type: 'date',
					done: function (value, date, endDate) {
						app.item[it] = value;
					}
				});
			});
		</script>

</body>

</html>